import {TabView, SceneMap, TabBar} from 'react-native-tab-view';
import {View, useWindowDimensions, Text} from 'react-native';
import Template from 'views/template';
import {useState, useMemo} from 'react';
import Material from 'views/material';
export default props => {
  const [index, setIndex] = useState(props.route.params.index);
  const [routes] = useState([
    {key: 'material', title: '素材'},
    {key: 'template', title: '模板'},
  ]);
  const layout = useWindowDimensions();

  const renderScene = useMemo(() => {
    return SceneMap({
      // photo,
      template: () => {
        return <Template showHeader={false}></Template>;
      },
      material: () => <Material size={props.route.params.size}></Material>,
    });
  }, [index]);
  return (
    <View style={{flex: 1}}>
      <TabView
        renderScene={renderScene}
        onIndexChange={setIndex}
        navigationState={{routes, index}}
        initialLayout={{width: layout.width}}
        renderTabBar={props => {
          return (
            <View style={{backgroundColor: 'white'}}>
              <View
                style={{
                  height: 50,
                }}>
                <TabBar
                  {...props}
                  activeColor="#0A59F7"
                  inactiveColor="rgba(0,0,0,0.8);"
                  indicatorStyle={{
                    backgroundColor: '#0A59F7',
                  }}
                  pressColor="#fff"
                  style={{
                    elevation: 0,
                    backgroundColor: 'white',
                  }}
                />
              </View>
            </View>
          );
        }}></TabView>
    </View>
  );
};
